{% extends "base.html" %}
{% from "_icones.html" import icone %}
{% block titulo %}Produtos{% endblock %}
{% block conteudo %}
<div class="topo">
  <div><h1>Produtos</h1><p>{{ total }} produto(s) em {{ grupos|length }} grupo(s). Cadastre manualmente ou importe do XML de uma nota.</p></div>
  <div class="acoes">
    <a class="btn" href="{{ url_for('grupos') }}">{{ icone('pasta') }} Grupos</a>
    <a class="btn" href="{{ url_for('produtos_importar') }}">{{ icone('upload') }} Importar de XML</a>
    <a class="btn prim" href="{{ url_for('produto_form', grupo=grupo if grupo not in ('', '0') else None) }}">{{ icone('mais') }} Novo produto</a>
  </div>
</div>

<div class="chips">
  <a class="chip {{ 'ativo' if grupo == '' }}" href="{{ url_for('produtos', q=q or None) }}">Todos <span>{{ total }}</span></a>
  {% for g in grupos %}
  <a class="chip {{ 'ativo' if grupo == g.id|string }}" href="{{ url_for('produtos', grupo=g.id, q=q or None) }}">
    <i style="background:{{ CORES_GRUPO.get(g.cor, '#1b7352') }}"></i>{{ g.nome }} <span>{{ g.qtd }}</span></a>
  {% endfor %}
  {% if sem_grupo %}<a class="chip {{ 'ativo' if grupo == '0' }}" href="{{ url_for('produtos', grupo=0, q=q or None) }}">Sem grupo <span>{{ sem_grupo }}</span></a>{% endif %}
  <a class="chip tracejado" href="{{ url_for('grupo_form') }}">{{ icone('mais') }} Novo grupo</a>
</div>

<form class="cartao" method="post" action="{{ url_for('produtos_lote') }}" id="form-lote">
  <input type="hidden" name="volta" value="{{ request.full_path }}">
  <div class="cab">
    <div class="busca">
      <input form="form-busca" name="q" value="{{ q }}" placeholder="Buscar por descrição, código, NCM ou EAN">
      <button form="form-busca" class="btn">{{ icone('busca') }}</button>
    </div>
    <div class="barra-lote" id="barra-lote">
      <b id="qtd-sel">0</b> selecionado(s)
      <select name="grupo_id" id="lote-grupo">
        <option value="">Mover para…</option>
        {% for g in grupos %}<option value="{{ g.id }}">{{ g.nome }}</option>{% endfor %}
        <option value="0">Sem grupo</option>
        <option value="novo">+ Novo grupo…</option>
      </select>
      <input name="grupo_novo" id="lote-novo" placeholder="Nome do novo grupo" style="display:none;max-width:200px">
      <button class="btn peq" name="acao" value="mover">Mover</button>
      <button class="btn peq perigo" name="acao" value="excluir" onclick="return confirm('Excluir os produtos selecionados?')">{{ icone('lixo') }}</button>
    </div>
  </div>
  {% if produtos %}
  <div class="tabela-wrap"><table class="tab">
    <thead><tr><th style="width:32px"><input type="checkbox" id="sel-todos" style="width:auto"></th><th>Código</th><th>Descrição</th><th>Grupo</th><th>NCM</th><th>Un.</th><th class="direita">Preço</th><th>CFOP</th><th></th></tr></thead>
    <tbody>
    {% for p in produtos %}
      <tr>
        <td><input type="checkbox" name="ids" value="{{ p.id }}" class="sel" style="width:auto"></td>
        <td class="mono">{{ p.codigo }}</td>
        <td><a href="{{ url_for('produto_form', pid=p.id) }}"><b>{{ p.descricao }}</b></a>
          <div class="suave peq">{% if p.ean %}EAN {{ p.ean }} · {% endif %}{{ p.origem_cadastro }}{% if p.fornecedor %} · {{ p.fornecedor }}{% endif %}</div></td>
        <td>{% if p.grupo_nome %}<span class="etiqueta" style="--cor:{{ CORES_GRUPO.get(p.grupo_cor, '#1b7352') }}">{{ p.grupo_nome }}</span>{% else %}<span class="suave peq">—</span>{% endif %}</td>
        <td class="mono">{{ p.ncm }}</td>
        <td>{{ p.unidade }}</td>
        <td class="direita nowrap">{{ p.preco|moeda }}</td>
        <td class="mono peq">{{ p.cfop_interno }} / {{ p.cfop_externo }}</td>
        <td><div class="acoes-linha">
          <a class="btn peq" href="{{ url_for('produto_form', pid=p.id) }}" title="Editar">{{ icone('editar') }}</a>
        </div></td>
      </tr>
    {% endfor %}
    </tbody></table></div>
  {% else %}
  <div class="vazio">{{ icone('produtos') }}<div>{{ 'Nenhum produto encontrado.' if q or grupo else 'Nenhum produto cadastrado ainda.' }}</div>
    {% if not q and not grupo %}<div style="margin-top:12px"><a class="btn" href="{{ url_for('produtos_importar') }}">{{ icone('upload') }} Importar do XML de uma nota</a></div>{% endif %}</div>
  {% endif %}
</form>
<form id="form-busca" method="get">{% if grupo %}<input type="hidden" name="grupo" value="{{ grupo }}">{% endif %}</form>
{% endblock %}
{% block scripts %}
<script>
const atualizarSel = () => {
  const n = $$('.sel').filter((c) => c.checked).length;
  $('#qtd-sel').textContent = n;
  $('#barra-lote').classList.toggle('visivel', n > 0);
};
$$('.sel').forEach((c) => c.addEventListener('change', atualizarSel));
const todos = $('#sel-todos');
if (todos) todos.addEventListener('change', () => { $$('.sel').forEach((c) => { c.checked = todos.checked; }); atualizarSel(); });
$('#lote-grupo').addEventListener('change', (e) => { $('#lote-novo').style.display = e.target.value === 'novo' ? '' : 'none'; });
</script>
{% endblock %}